import React, { PureComponent } from 'react'
import { getPaperAnswerDetail, getManualPaperAnswerDetail } from '@/services/paperInfo'
import { Card, Button } from 'antd'
import { baseurl } from '@/services/baseurl'
import styles from './index.less';
import { isLianxi } from '@/utils/utils'
export default class Paper extends PureComponent<any, any> {
    constructor(props: any) {
        super(props)
        this.state = {
            single: [],
            batch: [],
            judge: [],
            info: { subjects: '', total: '', name: '', test_time: '' }
        }
    }
    printPage = () => {
        window.print()
    }
    componentDidMount() {
        document.body.style.background = '#f0f0f0'
        const { id, type } = this.props.match.params;
        type === '1' ? getPaperAnswerDetail({ id }).then(res => {
            this.setState({
                single: res[0],
                batch: res[1],
                judge: res[2],
                info: res[3]
            })
        })
            : getManualPaperAnswerDetail({ id }).then(res => {
                this.setState({
                    single: res[0],
                    batch: res[1],
                    judge: res[2],
                    info: res[3]
                })
            })
    }

    render() {
        const { single, batch, judge, info } = this.state;
        return (
            <React.Fragment>
                <Card style={{ margin: '25px 25px 1px 25px', userSelect: 'none' }}>
                    {/* <Button className={styles['noprint']} type="primary" onClick={this.printPage} style={{position:'absolute',right:0,top:0}}>导出空白试卷</Button> */}
                    <h3>{info.name}</h3>
                    <h5>科目:{info.subjects} &nbsp;&nbsp;总分:{info.total}&nbsp;&nbsp;时长:{info.test_time}分钟</h5>
                    <table border="1" className={styles['table']}>
                        <thead>
                            <tr>
                                <th>题号</th>
                                <th>一</th>
                                <th>二</th>
                                <th>三</th>
                                <th>合计</th>
                                <th>统分人</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>得分</td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                            </tr>
                        </tbody>
                    </table>
                </Card>
                <Card style={{ margin: '0px 25px 25px 25px' }}>
                    <table border="1" className={styles['table-in-list']}>
                        <thead>
                            <tr>
                                <th>评分人</th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>得分</td>
                                <td></td>
                            </tr>
                        </tbody>
                    </table>
                    <h4> 一、单选题    (共<b>{single.length}</b>题,每题<b>{info.multiple_score}</b>分,说明:选择一项正确的答案)</h4>
                    <div className={styles['list']}>
                        {
                            single.map((item: any, index: number) => {
                                return <div className={styles['list-item']}>
                                    <h4>{index + 1}.{item.content}</h4>
                                    {item.img && <img src={baseurl + item.img} onClick={() => window.open(baseurl + item.img)} style={{ width: 300 }} alt="" />}
                                    <div>
                                        <p>A.{item.a}</p>
                                        <p>B.{item.b}</p>
                                        <p>C.{item.c}</p>
                                        {item.d && <p>D.{item.d}</p>}
                                        {item.e && <p>E.{item.e}</p>}
                                        {item.f && <p>F.{item.f}</p>}

                                    </div>
                                </div>
                            })
                        }

                    </div>

                    <table border="1" className={styles['table-in-list']}>
                        <thead>
                            <tr>
                                <th>评分人</th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>得分</td>
                                <td></td>
                            </tr>
                        </tbody>
                    </table>
                    <h4> 二、判断   (共<b>{judge.length}</b>题,每题<b>{info.judge_score}</b>分,说明:选择一项正确的答案)</h4>
                    <div className={styles['list']}>
                        {
                            judge.map((item: any, index: number) => {
                                return <div className={styles['list-item']}>
                                    <h4>{index + 1}.{item.content}</h4>
                                    {item.img && <img src={baseurl + item.img} onClick={() => window.open(baseurl + item.img)} style={{ width: 300 }} alt="" />}
                                    <div>
                                        <p>A.正确</p>
                                        <p>B.错误</p>
                                    </div>
                                </div>
                            })
                        }

                    </div>
                    {
                        !isLianxi() && <React.Fragment>
                            <table border="1" className={styles['table-in-list']}>
                                <thead>
                                    <tr>
                                        <th>评分人</th>
                                        <th></th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>得分</td>
                                        <td></td>
                                    </tr>
                                </tbody>
                            </table>
                            <h4> 三、多选题    (共<b>{batch.length}</b>题,每题<b>{info.choices_score}</b>分,说明:选择一项正确的答案)</h4>
                            <div className={styles['list']}>
                                {
                                    batch.map((item: any, index: number) => {
                                        return <div className={styles['list-item']}>
                                            <h4>{index + 1}.{item.content}</h4>
                                            {item.img && <img src={baseurl + item.img} onClick={() => window.open(baseurl + item.img)} style={{ width: 300 }} alt="" />}
                                            <div>
                                                <p>A.{item.a}</p>
                                                <p>B.{item.b}</p>
                                                <p>C.{item.c}</p>
                                                {item.d && <p>D.{item.d}</p>}
                                                {item.e && <p>E.{item.e}</p>}
                                                {item.f && <p>F.{item.f}</p>}

                                            </div>
                                        </div>
                                    })
                                }

                            </div>
                        </React.Fragment>
                    }
                </Card>
            </React.Fragment>
        )
    }
}
